<template>
  <div
    class="auth-layout min-h-screen w-full bg-gray-50 dark:bg-gray-900 transition-colors duration-300"
  >
    <router-view></router-view>
  </div>
</template>

<script setup>
import { computed, onMounted, watch } from "vue";
import { useThemeStore } from "@/stores/theme";

const themeStore = useThemeStore();
const isDarkMode = computed(() => themeStore.isDarkMode);

// 在组件挂载时初始化主题
onMounted(() => {
  // 确保主题状态同步
  document.documentElement.classList.toggle("dark", isDarkMode.value);
  document.body.classList.toggle("dark", isDarkMode.value);
});

// 监听主题变化
watch(isDarkMode, (newVal) => {
  document.documentElement.classList.toggle("dark", newVal);
  document.body.classList.toggle("dark", newVal);
});
</script>

<style lang="scss" scoped>
.auth-layout {
  @apply min-h-screen w-full;
}
</style>
